<template>
	<div>
		<div v-if="payload.nodeStatus === 0" class="before-form">
      <image v-if="isTikTok" :src="iconForm" class="img-in-tt"></image>
      <Icon v-else :src="iconForm" width="60px" height="60px" style="margin:5px 4px"/>
      <div class="form-button" @click="clickShowForm">
        {{ TUITranslateService.t("AIDesk.立即填写") }}
      </div>
		</div>
		<div v-else class="before-form">
      <div class="icon-container">
        <image v-if="isTikTok" :src="iconForm" class="img-in-tt"></image>
        <Icon v-if="!isTikTok" :src="iconForm" width="60px" height="60px" style="margin:5px 4px"/>
        <image v-if="isTikTok && payload.nodeStatus == 2" :src="iconFormFilled" class="form-icon-check" :style="{width:'26px', height:'26px'}"></image>
        <Icon v-if="!isTikTok && payload.nodeStatus == 2" class="form-icon-check" width="26px" height="26px" :src="iconFormFilled"/>
      </div>
      <div :class="payload.nodeStatus === 1 ? 'form-button disable': 'form-button'" @click="clickShowForm">
        {{ payload.nodeStatus === 1 ? TUITranslateService.t("AIDesk.立即填写") : TUITranslateService.t("AIDesk.查看内容") }}
      </div>
		</div>
	</div>
</template>
<script lang="ts">
import vue from '../../../../../../../adapter-vue';
import { customerServicePayloadType } from '../../../../../../../interface';
import iconForm from '../../../../../../../assets/icon_form.png';
import iconFormFilled from '../../../../../../../assets/icon_form_filled.png';
import Icon from '../customer-icon.vue';
import { TUITranslateService } from './../../../../../../../@aidesk/uikit-engine';
import { isTikTok } from "../../../../../../../utils/env";

const { ref } = vue;
interface Props {
  payload: customerServicePayloadType;
}
export default {
  components:{
    Icon,
  },
  props: {
    payload: {
      type: Object as () => customerServicePayloadType,
      default: () => ({}),
    },
  },
  emits: ['showFormPopup'],
  setup(props: Props, { emit }) {
    const clickShowForm = () => {
      emit('showFormPopup', true);
    };
    return {
      iconForm,
      iconFormFilled,
      clickShowForm,
      TUITranslateService,
      isTikTok,
    }
  }
}
</script>
<style lang="scss">
@import "../styles/common.scss";
.before-form {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .form-button {
    display: flex;
    justify-content: center;
    padding: 6px 10px;
    background-color: #1c66e5;
    color: white;
    border-radius: 20px;
    min-width: 100px;
  }

  .form-button.disable {
    background-color: #dbdbdb;
    pointer-events: none;
    cursor: not-allowed;
  }

  .icon-container {
    position: relative;
    display: flex;
    flex-direction: column;
    .form-icon-check {
      position: absolute;
      left: 60px;
      bottom: 6px;
    }
  }

  .img-in-tt {
    width: 60px;
    height: 60px;
    margin: auto;
  }
}
</style>
